<template>
  <div style="background:white;border-radius:10px;height:400px;">
    <el-row>
      <div>
        <el-col :span="24">
          <div class="projectIndexTitle">
            <div class="projectIndexSquare"></div>
            <span class="projectIndexInfo">项目信息：</span>
            <el-radio-group v-model="redioGroup" :max="1" size="mini" @change="tabclik">
              <el-radio-button class="indexRadioButton" label="recentlyCreat">最新创建</el-radio-button>
              <el-radio-button class="indexRadioButton" label="recentlyComplete">近期完成</el-radio-button>
            </el-radio-group>
          </div>
          <!-- <el-tabs style="height:40px;margin-left:20px" @tab-click="tabclik" value="recentlyCreat">
            <el-tab-pane label="最新创建项目" name="recentlyCreat"></el-tab-pane>
            <el-tab-pane label="近期完成项目" name="recentlyComplete"></el-tab-pane>
          </el-tabs> -->
        </el-col>
      </div>
    </el-row>
    <el-row style="padding:4px 20px 0 20px">
      <el-table class="tl-table" ref="mainTable" height="320" :resizable-refs="['search', 'toolbar', 'selector', 'pager']" :data="datas" row-key="id" @row-click="doRowDbClick" border fit v-loading="loading">
        <el-table-column prop="dispdeptcommoncode1" label="所属部门" min-width="20%" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="projectname" label="项目名称" min-width="20%" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="dispprojectlevel" label="项目级别" min-width="20%" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="projectmanager" label="项目经理" min-width="20%" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="approvaltime" label="立项时间" min-width="20%" :show-overflow-tooltip="true" align="center" v-if="redioGroup === 'recentlyCreat'">
          <template slot-scope="scope">{{ scope.row.finishdate | toDateTime('yyyy-MM-dd') }}</template>
        </el-table-column>
        <el-table-column prop="finishtime" label="完成时间" min-width="20%" :show-overflow-tooltip="true" align="center" v-if="redioGroup === 'recentlyComplete'">
          <template slot-scope="scope">{{ scope.row.actualenddate | toDateTime('yyyy-MM-dd') }}</template>
        </el-table-column>
      </el-table>
    </el-row>
    <index-comp ref="indexComp" :projectcode="projectcode"></index-comp>
  </div>
</template>

<script>
import { getAction } from '@tapui/utils/http'
import { validateNull } from '@tapui/utils/validate'
import indexComp from "../../gpmProjectInfo/indexForQueryComp"

// 异常情况概览
export default {
  name: 'recentlyCreateAndComplete',
  // mixins: [mixin_list],
  components: { indexComp },
  data() {
    return {
      selections: [
        {
          value: 'project',
          label: '项目'
        },
        {
          value: 'milepost',
          label: '里程碑'
        }
      ],
      timeColName: 'approvaltime',
      projectOrMilepost: '',
      datas: [],
      dateValue: new Date(),
      mySelection: '',
      loading: false,
      dataPermissionFlagForRecentlyProject: 'org',
      redioGroup: 'recentlyCreat',
      projectcode: '',
      url: {
        queryRecentlyCreateOrComplete: 'sd/sdIndex/queryRecentlyCreateOrComplete'
      }
    }
  },
  methods: {
    // 点击打开项目追踪页面
    doRowDbClick(row, column, event) {
      this.projectcode = row.projectcode
      this.$nextTick(() => {
        this.$refs.indexComp.id = row.id
        this.$refs.indexComp.visible = true
      })
    },
    tabclik(command) {
      // 清空现有数据
      this.datas = []
      var param = {}
      // 根据tab不同传递不同参数（主要是排序字段）
      if (command === 'recentlyCreat') {
        param = {
          dataPermissionFlag: this.dataPermissionFlagForRecentlyProject,
          pageSize: 10,
          sidx: 'GpmProject.FINISHDATE',
          tabName: command,
          sord: 'asc'
        }
      } else if (command === 'recentlyComplete') {
        param = {
          dataPermissionFlag: this.dataPermissionFlagForRecentlyProject,
          pageSize: 10,
          sidx: 'GpmProject.ACTUALENDDATE',
          tabName: command,
          sord: 'asc'
        }
      }
      this.loadData(param)
    },
    loadData(param) {
      this.dataPermissionFlagForRecentlyProject = param.dataPermissionFlag
      var paramDefault = {
        dataPermissionFlag: this.dataPermissionFlagForRecentlyProject,
        pageSize: 10,
        sidx: 'GpmProject.FINISHDATE',
        tabName: 'recentlyCreat',
        sord: 'asc'
      }
      Object.assign(paramDefault, param)
      this.loading = true
      getAction(this.url.queryRecentlyCreateOrComplete, paramDefault).then((res) => {
        if (res.success) {
          this.datas = res.result
          // 重载数据，防止表格高度变矮（element自带的BUG）
          this.$nextTick(() => {
            this.$refs.mainTable.doLayout()
          })
        } else {
          this.$tap.alert(res.message, 'warning')
        }
        this.loading = false
      })
    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.parentCenter {
  display: flex;

  background: #cecece;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.el-pagination__total {
  margin: 0px;
}
.pagebar {
  font-size: 14px;
}
.child {
  background: #000;
  width: 10%;
  height: 10%;
}
/** 表格上边、左边的线 */
.el-table--border,
.el-table--group {
  border: none;
}
/**  表格下边的线 */
.el-table--border::before,
.el-table--group::before {
  width: 0;
}
/**  表格右边的线 */
.el-table--border::after,
.el-table--group::after {
  height: 0;
}
/** 表格样式相关 */
.tl-table {
  /** “暂无数据”居中显示 */
  /deep/ .el-table__empty-block {
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  /deep/ .el-table__empty-text {
    text-align: center;
  }
  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; // 横向滚动条
    height: 7px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(144, 147, 153, 0.3);
  }
  // 控制边框
  /deep/ .gutter {
    display: none !important;
  }
  /deep/ .el-table__header-wrapper .el-table__header {
    table-layout: auto !important;
  }
  /deep/ .el-table__body-wrapper .el-table__body {
    table-layout: auto !important;
  }
}
</style>
